
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8"/>
	<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
	<title>美年大-订单支付页</title>
	<link rel="stylesheet" href="css/reset.css"/>
	<link rel="stylesheet" href="css/font/iconfont.css"/>
	<link rel="stylesheet" href="css/iosSelect.css"/>
	<link rel="stylesheet" href="css/header.css"/>
	<link rel="stylesheet" href="css/order_pay.css"/>
</head>
<body>
	<section class="order_pay">
		<header>
			<div class="head_left">
				<i class="icon iconfont icon-iconback"></i>
				订单支付
			</div>
			<div class="head_right">
				<i class="icon iconfont icon-moreandroid"></i>
			</div>
		</header>
		<div class="order_box">
			<div class="tj_pay">
				<label>美年大体检方案</label>
				<p>￥300</p>
			</div>
			<b class="b_tit">支付方式</b>
			<ul class="order_list">
				<li>
					<div class="l_left">
						<i class="icon iconfont icon-weixinzhifu"></i>
						<label>微信支付</label>
					</div>
					<div class="l_right">
						<i class="icon iconfont icon-hong" id="iconBtn1"></i>
					</div>
				</li>
			</ul>
			<ul class="order_list">
				<li>
					<div class="l_left">
						<i class="icon iconfont icon-kuaijiezhifu"></i>
						<label>快捷支付</label>
					</div>
					<div class="l_right">
						<i class="icon iconfont icon-hong" id="iconBtn2"></i>
					</div>
				</li>
			</ul>
			<ul class="order_list1">
				<li class="li_inp" id="li_inp" style="display:none;">
					<div class="sml_list">
	                    <p>银行卡号</p>
	                    <div class="item_input">
	                        <input type="text" placeholder="请输入您的快捷支付银行卡号">
	                    </div>
	                    <div class="clear">错误信息</div>
	                </div>
				</li>
			</ul>
			<ul class="order_list">
				<li>
					<div class="l_left">
						<i class="icon iconfont icon-yinxingqiadaikou"></i>
						<label>银行卡代扣</label>
					</div>
					<div class="l_right">
						<i class="icon iconfont icon-hong" id="iconBtn3"></i>
					</div>
				</li>
			</ul>
			<ul class="order_list1">
				<li class="li_inp" id="li_inp1" style="display:none;">
                    <div class="sml_list">
                        <p>姓名</p>
                        <div class="item_input">
                            李晓
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="sml_list">
                        <p>证件类型</p>
                        <div class="item_input">
                            身份证
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="sml_list">
                        <p>证件号码</p>
                        <div class="item_input">
                            2131431254353
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="sml_list">
                        <p>开户行</p>
                        <div class="item_input">
						<input type="hidden" name="bank_id" id="bankId" value="">                     
        				<span id="showBank">选择开户行</span>
						<i class="icon iconfont icon-right"></i>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="sml_list">
                        <p>卡号</p>
                        <div class="item_input">
                            <input type="text" placeholder="请输入卡号">
                        </div>
                        <div class="clear">错误信息</div>
                    </div>
                </li>
			</ul>
		</div>
	</section>
	<div class="mndBtn">
		<span class="nextBtn">确定支付</span>
	</div>
	<script type="text/javascript" src="js/bank.js"></script>
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="js/iosSelect.js"></script>
	<script type="text/javascript" src="js/iscroll.js"></script>
	<script type="text/javascript">
		var showBankDom = document.querySelector('#showBank');
	    var bankIdDom = document.querySelector('#bankId');
	    showBankDom.addEventListener('click', function () {
	        var bankId = showBankDom.dataset['id'];
	        var bankName = showBankDom.dataset['value'];

	        var bankSelect = new IosSelect(1, 
	            [data],
	            {
	                container: '.container',
	                title: '银行卡选择',
	                itemHeight: 36,
	                oneLevelId: bankId,
	                callback: function (selectOneObj) {
	                    bankIdDom.value = selectOneObj.id;
	                    showBankDom.innerHTML = selectOneObj.value;
	                    showBankDom.dataset['id'] = selectOneObj.id;
	                    showBankDom.dataset['value'] = selectOneObj.value;
	                }
	        });
	    });
		$("#iconBtn1").click(function(event) {
            $("#li_inp").hide();
            $("#li_inp1").hide();
			$(this).addClass('icon-rundcheck').removeClass('icon-hong');
			$("#iconBtn2").removeClass('icon-rundcheck').addClass('icon-hong');
			$("#iconBtn3").removeClass('icon-rundcheck').addClass('icon-hong');
		});
		$("#iconBtn2").click(function(event) {
            $("#li_inp").show();
            $("#li_inp1").hide();
			$(this).addClass('icon-rundcheck').removeClass('icon-hong');
			$("#iconBtn1").removeClass('icon-rundcheck').addClass('icon-hong');
			$("#iconBtn3").removeClass('icon-rundcheck').addClass('icon-hong');
		});
		$("#iconBtn3").click(function(event) {
            $("#li_inp1").show();
            $("#li_inp").hide();
			$(this).addClass('icon-rundcheck').removeClass('icon-hong');
			$("#iconBtn2").removeClass('icon-rundcheck').addClass('icon-hong');
			$("#iconBtn1").removeClass('icon-rundcheck').addClass('icon-hong');
		});
	</script>
</body>
</html>
